<template>
  <div class="container">
    <!-- 卡片组件 -->
    <el-card class="box-card">
      <!-- 卡片头 -->
      <div slot="header" class="clearfix">
        <span v-if="!$route.query.id">试题录入</span>
        <span v-else>试题修改</span>
      </div>
      <!-- 卡片内容 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 学科 -->
        <el-form-item label="学科：" prop="subjectID">
          <el-select
            v-model="ruleForm.subjectID"
            placeholder="请选择"
            @change="directoryName()"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in subjects"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录 -->
        <el-form-item label="目录：" prop="catalogID">
          <el-select v-model="ruleForm.catalogID" placeholder="请选择">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in directorys"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 企业 -->
        <el-form-item label="企业：" prop="enterpriseID">
          <el-select v-model="ruleForm.enterpriseID" placeholder="请选择">
            <el-option
              :label="item.company"
              :value="item.id"
              v-for="item in companys"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市 -->
        <el-form-item label="城市：" prop="province" class="city">
          <el-select v-model="ruleForm.province" placeholder="请选择">
            <el-option
              :label="item"
              :value="item"
              v-for="item in provinces"
              :key="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 子城市 -->
        <el-form-item prop="city" class="city area">
          <el-select v-model="ruleForm.city" placeholder="请选择">
            <el-option
              :label="item"
              :value="item"
              v-for="item in areas"
              :key="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 方向 -->
        <el-form-item label="方向：" prop="direction">
          <el-select v-model="ruleForm.direction" placeholder="请选择">
            <el-option
              :label="item"
              :value="item"
              v-for="item in directions"
              :key="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 题型 -->
        <el-form-item label="题型：" prop="questionType">
          <el-radio-group v-model="ruleForm.questionType">
            <el-radio :label="'1'">单选</el-radio>
            <el-radio :label="'2'">多选</el-radio>
            <el-radio :label="'3'">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 难度 -->
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="ruleForm.difficulty">
            <el-radio :label="'1'">简单</el-radio>
            <el-radio :label="'2'">中等</el-radio>
            <el-radio :label="'3'">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 题干 -->
        <el-form-item label="题干" prop="question">
          <quill-editor
            v-model="ruleForm.question"
            :options="editorOptions"
          ></quill-editor>
        </el-form-item>
        <!-- 选项 -->
        <!-- 单选 -->
        <el-form-item
          label="选项"
          prop="options"
          class="options"
          v-if="ruleForm.questionType === '1'"
        >
          <div class="option-item" v-for="item in option" :key="item.code">
            <el-radio
              @change="handleChange"
              :label="`${item.code}:`"
              v-model="ruleForm.options"
              name="hard"
            ></el-radio>
            <el-input v-model="item.title"></el-input>
            <!-- 图片上传 -->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
            >
              上传图片
              <i class="el-icon-circle-close"></i>
            </el-upload>
          </div>
          <el-button type="danger" disabled class="add"
            >+增加选项与答案</el-button
          >
        </el-form-item>
        <!-- 多选 -->
        <el-form-item
          label="选项"
          prop="options"
          class="options"
          v-else-if="ruleForm.questionType === '2'"
        >
          <div class="option-item" v-for="item in option" :key="item.code">
            <el-checkbox :label="`${item.code}:`" name="hard"></el-checkbox>
            <el-input v-model="item.title"></el-input>
            <!-- 图片上传 -->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
            >
              上传图片
              <i class="el-icon-circle-close"></i>
            </el-upload>
          </div>
          <el-button type="danger" class="add" @click="addOption"
            >+增加选项与答案</el-button
          >
        </el-form-item>
        <!-- 简答 -->
        <el-divider class="hr" v-else></el-divider>
        <!-- 解析视频 -->
        <el-form-item label="解析视频：">
          <el-input v-model="ruleForm.audio"></el-input>
        </el-form-item>
        <!-- 答案解析 -->
        <el-form-item label="答案解析：" prop="answer">
          <quill-editor
            v-model="ruleForm.answer"
            placeholder=""
            :options="editorOptions"
          ></quill-editor>
        </el-form-item>
        <!-- 题目备注 -->
        <el-form-item label="题目备注：" prop="comment">
          <div style="margin: 10px 0"></div>
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="ruleForm.comment"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <!-- 试题标签 -->
        <el-form-item label="试题标签：" prop="tags">
          <el-select
            v-model="ruleForm.tags"
            placeholder="请选择"
            filterable
            allow-create
          >
            <el-option
              :label="item.label"
              :value="item.label"
              v-for="item in tag"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('submit')"
            v-if="!$route.query.id"
            >确认提交</el-button
          >
          <el-button
            type="primary"
            @click="submitForm('change')"
            v-else
            class="change"
            >确认修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as directorySimple } from '@/api/hmmm/directorys.js'
import { list } from '@/api/hmmm/companys.js'
import { add, detail as questionDetail, update } from '@/api/hmmm/questions.js'
import { direction as workDirection } from '@/api/hmmm/constants.js'
import { simple as simpleTags } from '@/api/hmmm/tags.js'

// detail as questionDetail
// 富文本功能
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['code-block'],
  ['image', 'link']
]
export default {
  components: { quillEditor },
  data () {
    return {
      ruleForm: {
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 企业
        enterpriseID: '',
        // 城市
        province: '',
        city: '',
        // 方向
        direction: '',
        // 题型
        questionType: '1',
        // 难度
        difficulty: '1',
        // 题干
        question: '',
        // 选项
        // options: [],
        options: '',
        // 答案
        // 解析视频
        audio: '',
        // 答案解析
        answer: '',
        // 题目备注
        comment: '',
        // 试题标签
        tags: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        question: [
          {
            required: true,
            message: '请输入题干',
            trigger: ['blur', 'change']
          }
        ],
        province: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        answer: [{ required: true, message: '请输入答案', trigger: 'change' }]
      },
      // 省份
      provinces: provinces(),
      // 学科列表
      subjects: [],
      // 目录列表
      directorys: [],
      // 企业
      companys: [],
      // 方向
      directions: workDirection,
      tag: '',
      option: [
        { isRight: 0, code: 'A', title: '', img: '' },
        { isRight: 0, code: 'B', title: '', img: '' },
        { isRight: 0, code: 'C', title: '', img: '' },
        { isRight: 0, code: 'D', title: '', img: '' }
      ],
      alpha: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V'
      ],
      // 获取id
      ID: this.$route.query.id || '',
      editorOptions: {
        theme: 'snow',
        placeholder: '',
        modules: {
          toolbar: toolbarOptions
        }
      },
      i: 1
    }
  },
  methods: {
    handleChange () {
      console.log(this.ruleForm.options)
    },
    // 提交内容
    submitForm (data) {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.ruleForm.options) {
            this.option.forEach((item) => {
              if (this.ruleForm.options[0] === item.code) item.isRight = 1
            })
          }
          this.ruleForm.options = this.option
          console.log(this.ruleForm.options)
          console.log(this.ruleForm)
          if (data === 'submit') {
            await add(this.ruleForm)
          } else {
            await update(this.ruleForm)
          }
          this.$message.success('添加成功')
          this.$router.push('/questions/list')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 学科目录
    async directoryName () {
      this.ruleForm.catalogID = ''
      const { data } = await directorySimple({
        subjectID: this.ruleForm.subjectID
      })
      this.directorys = data
      const { data: items } = await simpleTags({
        subjectID: this.ruleForm.subjectID
      })
      this.tag = items
    },
    addOption () {
      this.option.push({
        isright: false,
        code: this.alpha[this.option.length],
        title: '',
        img: ''
      })
    }
    // 清空表单
    // reset () {
    //   if (this.$route.path === '/questions/new') {
    //     console.log(this.$refs.ruleForm)
    //     // this.$refs.ruleForm.resetFields()
    //   }
    // }
  },
  computed: {
    areas () {
      return citys(this.ruleForm.province)
    }
  },
  async created () {
    const { data } = await simple()
    const {
      data: { items }
    } = await list()
    // console.log(items)
    this.companys = items
    this.subjects = data
    // 根据跳转获取数
    const res = this.$route.query

    if (res.id) {
      const { data } = await questionDetail(res)

      this.ruleForm = { ...data }
      this.ruleForm.options = 1
      console.log(this.ruleForm.options, 'yghi')
      if (data.options.length > 0) {
        data.options.forEach((item, index) => {
          if (item.isRight === 1) {
            this.ruleForm.options = `${item.code}:`
          }
        })
      }
      this.ruleForm.remarks = 'null'
      this.ruleForm.videoURL = 'null'

      this.ID = res.id
      // console.log(this.$route.path)
      this.$nextTick(() => {
        window.scrollTo(0, 0)
      })
    }
  },
  beforeUpdate () {
    if (this.$route.path === '/questions/new' && this.i <= 5) {
      console.log(111)
      console.log(this.$route.query)
      if (!this.$route.query.id) {
        this.i++
        this.$refs.ruleForm.resetFields()
      }
    }
  }

}
</script>

<style scoped lang='scss'>
.el-card {
  margin: 20px;
  .el-header {
    height: 55px;
  }
}
::v-deep .el-input__inner {
  margin-left: 5px;
  width: 400px;
}
.hr {
  width: 0;
  margin: 0;
}
::v-deep .city {
  .el-input__inner {
    width: 198px;
  }
}
::v-deep .ql-editor {
  height: 200px;
}
::v-deep .options {
  .el-input {
    display: inline;
    .el-input__inner {
      width: 240px;
    }
  }
  .el-radio {
    margin-right: 0px;
  }
}
.option-item {
  height: 80px;
  margin-top: 20px;
  margin-left: 10px;
  padding-bottom: 20px;
}
.avatar-uploader {
  display: inline-block;
  border: 1px dashed #d9d9d9;
  margin-left: 5px;
  padding-left: 19px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 60px;
  line-height: 60px;
}
.el-icon-circle-close {
  font-size: 18px;
  color: #999;
  transform: translate(10px, -27px);
}
.add {
  padding: 2px 4px;
  width: 120px;
  height: 30px;
  font-size: 12px;
}

::v-deep .el-textarea__inner {
  width: 400px;
  height: 96px;
}
.city {
  display: inline-block;
}
::v-deep .area {
  .el-form-item__content {
    margin-left: 0px !important;
  }
}
.change {
  background-color: #67c23a;
  border-color: #67c23a;
}
</style>
